<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.14/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.9.14/dist/layui.js"></script>
    <style>
        #header{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;


        }
        #sidebar{
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 50px; /* 留出头部导航的高度 */
            bottom: 0;
            left: 0;
            width: 200px;
            height: 100%;
            padding: 10px;
            margin-top: 30px;
            z-index: 10 ;
        }
        #content {
            margin-top: 100px;
            width:51%;
        }
        #content_head_container{
            display: inline-list-item;
        }
        #sidebar_right{
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 50px; /* 留出头部导航的高度 */
            bottom: 0;
            left: 0;
            width: 300px;
            height: 100%;
            padding: 10px;
            margin-top: 30px;
            margin-left: 1100px;
            z-index: 10 ;

        }
        #userHead{
            border-radius: 50%;
            overflow: hidden;
            width: 15%;
            height: 15%;
        }
        .container {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            z-index: 10;
            border: none;
            /*padding: 10px;*/

        }
      .layui-nav *{
            font-size: 20px;
      }
      .layui-nav-tree.layui-nav-side{
          position: relative;
          margin-top: 10px;
      }
    </style>
</head>
<body>
<!--水平导航-->
<div id="header" class="layui-form layui-col-xs12 layui-bg-gray">
    <div class="container layui-header">
        <ul class="layui-nav layui-layout-left  layui-bg-gray" >
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-hide-xs">
                <img style="width: 40px;height: 40px; padding: 10px" src="../../photos/rqbl.png" alt="图片">
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <input type="text" placeholder="" class="layui-input">
                <div class="layui-input-split" style="cursor: pointer;">
                    <i class="layui-icon layui-icon-search"></i>
                </div>

            </li>
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
                <li class="layui-nav-item "><a href="">首页</a></li>
                <li class="layui-nav-item "><a href="individual_center.html">个人中心</a></li>
                <li class="layui-nav-item "><a href="pal_acc_setting.html">账号设置</a></li>
            </li>
        </ul>
        </div>
          </div>
<!--垂直导航-->
<div id="sidebar" class="layui-col-xs3 layui-col-xs-offset1">
    <ul  class="layui-nav layui-nav-tree layui-nav-side layui-bg-gray">
        <span class="layui-nav-item" style="padding-left: 10px">
             个人主页
        </span>
        <li class="layui-nav-item">
            <a  href="individual_center.html">
                <i class="layui-icon layui-icon-home">我的主页</i>
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="watchList.html">
                <i class="layui-icon layui-icon-user">  我的关注</i>
             </a>
        </li>
        <li class="layui-nav-item">
            <a href="interstList.html">
                <i class="layui-icon layui-icon-face-smile-b">  我的兴趣</i>
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="interstTribal.html">
                <i class="layui-icon layui-icon-group">兴趣部落 </i>
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="friendList.html"> <i class="layui-icon layui-icon-friends"> 我的好友 </i></a>
        </li>
        <li class="layui-nav-item">
            <a href="comment.html"> <i class="layui-icon layui-icon-log">  我的评论</i></a>
        </li>
    </ul>
</div>

<div id="content" class="layui-carousel layui-col-xs-offset3">

    <div id="content_head_container">
<!--        背景图片-->
        <div class="layui-carousel" id="content_head"   style="display: inline-block;">
            <div carousel-item>
                <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div>
                <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg"></div>
                <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg"></div>
                <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg"></div>
                <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg"></div>
            </div>
        </div>
<!--        可能感兴趣的人-->
        <div id="" class="layui-bg-gray" style="display: inline-block;">

        </div>
    </div>
    <div>
        <!--        用户头像-->
        <div class="layui-btn-container"style="display: flex; justify-content: center; align-items: center;">

            <img id="userHead" class="layui-upload-" src="../photos/rqbl.png" alt="">
            <div>
            <div style="padding-left: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column;">
                <p>用户名称</p><br>

            </div>
            <div style="padding-left: 10px;display: flex; justify-content: center; align-items: center; flex-direction: column;">
                <span>个性标签</span>
            </div>
            </div>
        </div>
        <div style="margin-top: 20px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column;">
            <button type="button" class="layui-btn layui-btn-primary" lay-on="update_portrait">
                <span class="layui-badge-dot"></span> 更换头像
            </button>
        </div>
        <hr>
        <div style="">
            <p style="text-align: center">个人精选</p>
        </div>
        <hr>
        <div class="layui-input-inline" style="margin: 15px;padding-top: 10px!important;">
        看你想汪这里填充什么,请看 script 的第一个函数,
        </div>
        <div id="ID-flow-demo">

        </div>
    </div>
</div>
<div id="sidebar_right" class="layui-col-xs3 layui-col-xs-offset9 layui-bg-gray">
    <div class="layui-card-header"><p style="font-family: 宋体">你可能感兴趣的人</p></div>
<!--    填上其他用户-->
    <div class="layui-card-body">

    </div>
</div>

</body>

<script>
    layui.use(function(){
        var flow = layui.flow;
        //用户内容加载更多
        flow.load({
            elem: '#ID-flow-demo', // 流加载容器
            scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
            done: function(page, next){ // 执行下一页的回调
                // 数据插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < 8; i++){
                        lis.push('<p style="margin: 20px">'+'<img id="userHad" src="../photos/rqbl.png">' + ( (page-1)*8 + i + 1 ) +'</p>')
                    }

                    // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    // pages 为 Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < 10); // 此处假设总页数为 10
                }, 520);
            }
        });
    });
    //首页背景图片流加载
    layui.use(function(){
        var carousel = layui.carousel;
        // 渲染 - 图片轮播
        carousel.render({
            elem: '#content_head',
            width: '720px',
            height: '360px',
            interval: 3000
        });
    });

    layui.use(function(){
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;
        // 事件
        util.on('lay-on', {
            'update_portrait': function(){
                layer.open({
                    type: 1,
                    area: '350px',
                    resize: false,
                    shadeClose: true,
                    title: '更换头像',
                    content: `
                        <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                            <i class="layui-icon layui-icon-upload"></i> 上传
                        </button>
                        <div style="width: 132px;">
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                                 <div id="ID-upload-demo-text"></div>
                            </div>
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                                <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                        </div>
                        <hr style="margin: 21px 0;">
        `,
                    success: function(){
                        var upload = layui.upload;
                        var layer = layui.layer;
                        var element = layui.element;
                        var $ = layui.$;
                        // 单图片上传
                        var uploadInst = upload.render({
                            elem: '#ID-upload-demo-btn',
                            url: '', // 实际使用时改成您自己的上传接口即可。
                            before: function(obj){
                                // 预读本地文件示例，不支持ie8
                                obj.preview(function(index, file, result){
                                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                                });

                                element.progress('filter-demo', '0%'); // 进度条复位
                                layer.msg('上传中', {icon: 16, time: 0});
                            },
                            done: function(res){
                                // 若上传失败
                                if(res.code > 0){
                                    return layer.msg('上传失败');
                                }
                                // 上传成功的一些操作
                                // …
                                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                            },
                            error: function(){
                                // 演示失败状态，并实现重传
                                var demoText = $('#ID-upload-demo-text');
                                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                                demoText.find('.demo-reload').on('click', function(){
                                    uploadInst.upload();
                                });
                            },
                            // 进度条
                            progress: function(n, elem, e){
                                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                                if(n == 100){
                                    layer.msg('上传完毕', {icon: 1});
                                }
                            }
                        });
                    }
                });
            }
        })
    });
</script>
</html>
